<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
  <base href="/">
  <meta charset="utf-8">
  <title th:text="${index[0].blogSettitle}"></title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="keywords" th:content="${index[0].blogKeywords}">
  <meta name="description" th:content="${index[0].blogDescription}">
  <link rel="stylesheet" href="res/layui/css/layui.css">
  <link rel="stylesheet" href="res/css/global.css">

  <style>
    .fly-link li {
      float: left;
      margin: 0 0 5px 10px;
    }
    .fly-link li a {
      font-size: 14px;
      color: #555;
      background: #F3F3F3;
      text-align: center;
      line-height: 36px;
      padding-right: 0px;
      padding: 8px 21px;
      border-radius: 20px;
    }
    .fly-link ul {
      display: inline-block;
      vertical-align: top;
      padding: 5px 0px;
    }
    .fly-link li a:hover {
      color: #fff;
      background: #393D49;
    }
  </style>
</head>
<body>

<div class="fly-header layui-bg-black">
  <div class="layui-container">
    <a class="fly-logo" href="/">
      <img th:src="${index[0].blogLogo}" alt="layui" width="200" height="40">
    </a>

    <ul class="layui-nav fly-nav-user">

      <!-- 未登入的状态 -->
      <shiro:guest>
      <li class="layui-nav-item">
        <a class="iconfont icon-touxiang layui-hide-xs" href="user"></a>
      </li>
      <li class="layui-nav-item">
        <a href="user">登入</a>
      </li>
      <li class="layui-nav-item">
        <a href="user/regist.html">注册</a>
      </li>
      </shiro:guest>
      <!--<li class="layui-nav-item layui-hide-xs">
        <a href="/app/qq/" onclick="layer.msg('正在通过QQ登入', {icon:16, shade: 0.1, time:0})" title="QQ登入" class="iconfont icon-qq"></a>
      </li>
      <li class="layui-nav-item layui-hide-xs">
        <a href="/app/weibo/" onclick="layer.msg('正在通过微博登入', {icon:16, shade: 0.1, time:0})" title="微博登入" class="iconfont icon-weibo"></a>
      </li>-->

      <!-- 登入后的状态 -->
      <shiro:user>
      <li class="layui-nav-item">
        <a class="fly-nav-avatar" href="javascript:;">
          <cite class="layui-hide-xs"><shiro:principal/></cite>
          <i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：layui 作者"></i>
          <i class="layui-badge fly-badge-vip layui-hide-xs">VIP3</i>
          <img src="https://tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg">
        </a>
        <dl class="layui-nav-child">
          <dd><a href="user/userindex"><i class="layui-icon">&#xe620;</i>基本设置</a></dd>
          <dd><a href="user/message.html"><i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息</a></dd>
          <dd><a href="user/home.html"><i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页</a></dd>
          <hr style="margin: 5px 0;">
          <dd><a href="/user/logout/" style="text-align: center;">退出</a></dd>
        </dl>
      </li>
        </shiro:user>
    </ul>
  </div>
</div>

<div class="fly-panel fly-column">
  <div class="layui-container">
    <ul class="layui-clear">
      <li class="layui-hide-xs layui-this"><a href="/">首页</a></li>
    </ul>
    <shiro:user>
    <div class="fly-column-right layui-hide-xs"> 
      <span class="fly-search"><i class="layui-icon"></i></span> 
      <a href="user/findUserBlog" class="layui-btn">发表新帖</a>
    </div> 
    <div class="layui-hide-sm layui-show-xs-block" style="margin-top: -10px; padding-bottom: 10px; text-align: center;"> 
      <a href="user/findUserBlog" class="layui-btn">发表新帖</a>
    </div>
      </shiro:user>
  </div>
</div>

<div class="layui-container">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md8">
      <div class="fly-panel" style="margin-bottom: 0;">
        
        <div class="fly-panel-title fly-filter">
          <a href="" class="layui-this">综合</a>
          <span class="fly-mid"></span>
          <a href="">未结</a>
          <span class="fly-mid"></span>
          <a href="">已结</a>
          <span class="fly-mid"></span>
          <a href="">精华</a>
          <span class="fly-filter-right layui-hide-xs">
            <a href="" class="layui-this">按最新</a>
            <span class="fly-mid"></span>
            <a href="">按热议</a>
          </span>
        </div>

        <ul class="fly-list" id="lists">
        </ul>
        <div style="text-align: center">
            <div id="demo2"></div>
        </div>

      </div>
    </div>
    <div class="layui-col-md4">

      <div class="fly-panel">
        <h3 class="fly-panel-title">博客分类</h3>
        <div class="fly-link" style="padding-bottom: 0;">
          <ul>
            <li th:each="classblog:${blogClassifies}"><a th:href="'view/indexclass/'+${classblog.getClassifyId()}" th:title="${classblog.getClassifyName()}" th:text="${classblog.getClassifyName()}"></a></li>
          </ul>
        </div>
      </div>

<!--
      <div class="fly-panel fly-signin">
        <div class="fly-panel-title">
          签到
          <i class="fly-mid"></i>
          <a href="javascript:;" class="fly-link" id="LAY_signinHelp">说明</a>
          <i class="fly-mid"></i>
          <a href="javascript:;" class="fly-link" id="LAY_signinTop">活跃榜<span class="layui-badge-dot"></span></a>
          <span class="fly-signin-days">已连续签到<cite>16</cite>天</span>
        </div>
        <div class="fly-panel-main fly-signin-main">
          <button class="layui-btn layui-btn-danger" id="LAY_signin">今日签到</button>
          <span>可获得<cite>5</cite>飞吻</span>

        </div>
      </div>-->

      <dl class="fly-panel fly-list-one">
        <dt class="fly-panel-title">本周热议</dt>
        <dd th:each="bloglist:${blogList}">
          <a th:href="@{'index/indexinfo/'}+${bloglist.blogId}" th:text="${bloglist.blogTitle}"></a>
          <span><i class="iconfont">&#xe60b;</i> <b th:text="${bloglist.blogViews}"></b>  </span>
        </dd>

        <!-- 无数据时 -->
        <!--
        <div class="fly-none">没有相关数据</div>
        -->
      </dl>

      <div class="fly-panel">
        <div class="fly-panel-title">
          这里可作为广告区域
        </div>
        <div class="fly-panel-main">
<!--          <a href="http://layim.layui.com/?from=fly" target="_blank" class="fly-zanzhu" time-limit="2017.09.25-2099.01.01" style="background-color: #5FB878;">LayIM 3.0 - layui 旗舰之作</a>-->
        </div>
      </div>
    </div>
  </div>
</div>

<footer th:replace="footer::header-fragment"></footer>
 
<script src="res/layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  layui.cache.page = 'user';
  layui.cache.user = {
    username: '游客'
    ,uid: -1
    ,avatar: 'res/images/avatar/00.jpg'
    ,experience: 83
    ,sex: '男'
  };
  layui.config({
    version: "3.0.0"
    ,base: 'res/mods/'
  }).extend({
    fly: 'index'
  }).use('fly');
  $(function(){
    queryAll(1,10);
  })
  function queryAll(pageNum,pageSize){
    $.ajax({
      type: 'POST',
      url: "index/blogindexclass", // ajax请求路径
      async:false,
      dataType: 'json',
      data: {
        "page":pageNum,
        "limit":pageSize
      },
      success: function(data){
        var res = data;
        newsNum = res.data.length;
        count = res.count;
        //日期格式化
        function formatDate(now)   {
          var y=now.getFullYear();
          var m=now.getMonth()+1;
          var d=now.getDate();
          var h=now.getHours();
          var m=now.getMinutes();
          var s=now.getSeconds();
          return y+"-"+m+"-"+d;
        };
        layui.use('laypage', function(){
          var laypage = layui.laypage;
          laypage.render({
            elem: 'demo2' //注意，这里的 test1 是 ID，不用加 # 号
            ,count: count //数据总数，从服务端得到
            , limit: pageSize  //每页显示条数
            ,curr: pageNum //获取起始页
            //跳转页码时调用
            , jump: function (obj, first) { //obj为当前页的属性和方法，第一次加载first为true
              //非首次加载 do something
              if (!first) {
                queryAll(obj.curr,obj.limit);
              }
            }
          });
          $("#lists").children().remove();
          for(let i=0;i<newsNum;i++){
            // alert(res.data[i].images) //标题
            var ds=new Date(res.data[i].blogCreateTime);
              var div = '<li>'+
                      '<a href="index/indexinfo/'+res.data[i].blogId+'" class="fly-avatar">'+
                      '<img src="'+res.data[i].images+'" alt="测试"></a>'+
            '<h2> <a class="layui-badge">'+'分类'+'</a><a href="index/indexinfo/'+res.data[i].blogId+'">'+res.data[i].blogTitle+'</a> </h2>'+
            '<div class="fly-list-info"><a href="index/indexinfo/'+res.data[i].blogId+'" link> <cite>'+res.data[i].blogClassifyName+'</cite> </a> <span>'+formatDate(ds)+'</span>'+
            '<span class="fly-list-kiss layui-hide-xs" title="悬赏飞吻"><i class="iconfont icon-kiss"></i> 60</span>'+
            '<span class="fly-list-nums"><i class="iconfont" title="人气">&#xe60b;</i>'+res.data[i].blogViews+'</span>'+
            '</div> <div class="fly-list-badge"></div></li>'
              $("#lists").append(div);
            }
          });

      }
    });
  }
</script>

</body>
</html>